<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        
    </div>
</body>
<!--   JS   -->
    <script>
       let data = {
        name:'光与夜之恋',
        address:'光启市'
       }

       //创建一个监视的实例对象，用于监视data中属性的变化
       const obs = new Observer(data)
       console.log(obs)

       let vm = {}
       vm._data = data

       function Observer(obj){
            //汇总对象中所有的属性形成一个数组 keys=[name,address]
            const keys = Object.keys(obj)
            //遍历
            keys.forEach((k)=>{
                Object.defineProperty(this,k,{
                    get(){
                        return obj[k]
                    },
                    set(val){
                        console.log(`k被更改了`)
                        obj[k] = val
                    }
                })
            })
       }
    </script>
</html>